<template>
 <div id="DT">
     <div class="animation">
        <div class="title-singer">
            <ul class="zm-ul">
                <li><span>语种:</span></li>
                <ul>
                <li><span>全部</span></li>
                <li @click="activeChange(1)"><span>华语</span></li>
                <li @click="activeChange(2)"><span>欧美</span></li>
                <li @click="activeChange(3)"><span>日本</span></li>
                <li @click="activeChange(4)"><span>韩国</span></li>
                </ul>
            </ul>
             <ul class="zm-ul">
                <li><span>分类:</span></li>
                <ul>
                <li><span>男歌手</span></li>
                <li><span>女歌手</span></li>
                <li><span>日本</span></li>
                <li><span>乐队组合</span></li>
                </ul>
            </ul>
            <ul class="zm-ul">
                <li><span>筛选:</span></li>
                <ul>
                <li v-for='(items,index) in sx' :key='index'  @click="upData(items,index)">
                    <span :class="{active:active == index}">{{items}}</span>
                </li>
                </ul>
                
            </ul>
        </div>
        <div>
            <PhQq :data="listDataSinger"></PhQq>
        </div>
</div>
</div>   
</template>
<script>
import RankingList from '@/components/slotPh.vue'
import Title2 from '@/components/title2.vue'
import PhQq from '@/components/slotZbdtRecommed.vue'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
    data() {
        return {
            sx:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
           upDataSx:'',
           active:Number,
            listDataSinger:[
                
            //     {
            //         // 3 筛选歌手
            //     type:'3',
            //     sxValue:'s',
            //     id:'图片1',
            //     title:'薛之谦',
            //     index:'',
            //     popularity:'230万',
            //     "cover":require('../../public/homeImg/recommGd.jpg'),
            //     titleH1:'独家放送',
            // },
            
            ]
        }
    },
    components:{
            RankingList,Title2,PhQq
        },
    mounted() {
		var mySwiper = new Swiper('.swiper-container', {
	        autoplay: 5000,//可选选项，自动滑动
            slidesPerView : 3,
            spaceBetween : 20,
            watchSlidesProgress : true,
            watchSlidesVisibility : true,
        })
        this.Artist(4)
	},
    methods: {
        upData(value,index){
            this.upDataSx = value;
            this.active = index
            console.log(value)
        },
        activeChange(){

        },
      async Artist(data){
      let res = await Services(api.artist,data);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.list.artists]
      this.listDataSinger = getData.map(function(item,index){
      return {
        title:getData[index].name,
        id:getData[index].id,
        cover:getData[index].picUrl,
        type:'3',
        alias:getData[index].alias

      }
    })
    console.log(this.listDataSinger)
      }else{
        console.log(res)
      }
    },
    },
}
</script>
<style lang="less" scoped>
.animation{
        @media (min-width: 1100px) {
   width: 100%;
} 
@media (min-width: 1800px) {
    width: 95%;
} 
    // border: solid forestgreen 1px;
    // width: 7.1875rem /* 1380/192 */;
    // width: 1440px;
    margin: 0 auto;
    // position: relative;
    div,span,ul,li,img{
    font-size: 0;
}
 .title-singer{
    margin-bottom: 10px;
    .zm-ul{
        box-sizing: border-box;
          li{
            box-sizing: border-box;
            width: 78px;
          
            span{
                font-size: 15px;
                color: #676767;
            }
            
        }
        display: flex;
        ul{     
                li{
                    box-sizing: border-box;
                     width: 78px;
                     text-align: center;
                     border-right: 1px solid  #F2F2F2;;
                     margin-bottom: 12px;
                }
                display: flex;
                flex-flow: wrap;
            }
      
    }
    .active{
        background: #FDF5F5;
        color: #EC4141 !important;
        padding:2px 11px;
        border-radius: 35%;
    }
 }
}
</style>